<script setup lang="ts">

import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { apiVerify } from '@/api/apiUser'
import { dayjs } from 'element-plus'


const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
	TxId: '',
	Key: '',
	Raw: '',
})

const rules = reactive<FormRules>({
	TxId: [{ required: true, message: '请输入存证Id', trigger: 'blur' }],
	Key: [{ required: true, message: '请输入验证键', trigger: 'blur' }],
	Raw: [{ required: true, message: '请输入验证值', trigger: 'blur' }],
})

const itemInfo = ref("")
const fullscreenLoading = ref(false)

const errorMsg = ref("验证失败 !")
const isShowVerify = ref(false)
const verifyFailed = () => {
	ElMessage.error(errorMsg.value)
}
const verifySuccess = () => {
	ElMessage({
		message: '验证成功 !',
		type: 'success',
	})
}

const submitForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return
	formEl.validate((valid) => {
		if (valid) {
			handleItemVerify()
		}
	})
}


async function handleItemVerify() {
	fullscreenLoading.value = true
	const resp = await apiVerify(ruleForm)
	fullscreenLoading.value = false

	if (resp.CODE == "ok" && resp.DATA != "failed") {
		itemInfo.value = resp.DATA
		verifySuccess()
		isShowVerify.value = true
	} else {
		verifyFailed()
	}
}


const resetForm = (formEl: FormInstance | undefined) => {
	isShowVerify.value = false
	if (!formEl) return
	formEl.resetFields()
}


function formatTimeUnix(t) {
	return dayjs(t * 1000).format('YYYY年MM月DD日 HH:mm:ss')
}

</script>


<template>
	<div class="common-layout">

		<el-header class="header" height="80px">
			<div class="headerBody">
				<h2>
					NewChain
				</h2>
			</div>
		</el-header>

		<el-container>
			<el-container>
				<el-main class="main big">
					<div class="checkForm">
						<el-form size="large" ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules"
							label-width="120px" class="box">
							<el-form-item label="存证ID" prop="TxId">
								<el-input v-model="ruleForm.TxId" autocomplete="off" />
							</el-form-item>
							<el-form-item label="验证键" prop="Key">
								<el-input v-model="ruleForm.Key" autocomplete="off" />
							</el-form-item>
							<el-form-item label="验证值" prop="Raw">
								<el-input v-model="ruleForm.Raw" autocomplete="off" type="textarea" />
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submitForm(ruleFormRef)">验证</el-button>
								<el-button @click="resetForm(ruleFormRef)">重置</el-button>
							</el-form-item>
						</el-form>
						<div class="box">

							<el-empty description="请输入需要验证的值" v-show="!isShowVerify" />

							<el-descriptions title="验证结果" v-show="isShowVerify" :column="1">

								<el-descriptions-item label="存证ID">{{ itemInfo.TxId }}</el-descriptions-item>
								<el-descriptions-item label="数据指纹">{{ itemInfo.Sum }}</el-descriptions-item>
								<el-descriptions-item
									label="存证时间">{{ formatTimeUnix(itemInfo.BlockTime) }}</el-descriptions-item>
								<el-descriptions-item label="块Hash">
									<el-tag size="small">{{ itemInfo.BlockHash }}</el-tag>
								</el-descriptions-item>
								<el-descriptions-item label="块高度">{{ itemInfo.BlockNum }}</el-descriptions-item>
							</el-descriptions>
						</div>
					</div>


				</el-main>



				<el-footer class="foot">Copyright © 2020 新大陆创新发展中心版权.
				        <el-link href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">闽B2-20050028</el-link></el-footer>
				        
			</el-container>
		</el-container>
	</div>
</template>

<style scoped></style>

<style scoped>
.headerBody {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding-right: 2em;
	padding-left: 2em;
}

h2 {
	font-size: 28px;
	line-height: 80px;
	font-weight: bold;
	font-style: italic;
}

.checkForm {
	display: flex;
	justify-content: space-between;
	align-items: center;
	height: 60vh;

}

.box {
	display: inline;
	width: 40%;
	margin: 1em;
}
</style>
